<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
        >注册
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <div class="info">
            <label class="fa fa-user-o"></label>
            <input type="text" placeholder="用户名：3到12位数字、字母或汉字" v-model="name" pattern="^[0-9a-zA-Z\u4e00-\u9fa5]{3,12}$">
            <hr>
            <label class="fa fa-lock"></label>
            <input type="password" placeholder="密码：6-16位字母或数字" v-model="psw" pattern="^[0-9a-zA-Z]{6,12}$">
            <hr>
            <label class="fa fa-lock"></label>
            <input type="password" placeholder="再次输入密码">
            <hr>
        </div>
        <button class="butt" @touchstart="dian">注&emsp;册</button>
        <div class="last">
            <router-link to="/login" style="color: #55bec1;">登录</router-link>
            <router-link to="/" style="color: #55bec1;">首页</router-link>
        </div>
    </div>
    
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        data:function(){
            return {
                name:null,
                psw:null
            }
        },
        components:{
            XHeader
        },
        methods:{
            dian:function(){
                this.http.post("/api/users/regist",{
                    name:this.name,
                    psw:this.psw
                }).then(res=>{
                    this.$vux.alert.show({
                        title:res.data.msg,
                        onHide(){
                            if(!res.data.err){
                                location.href = '/#/login'
                            }       
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>
    XHeader{
        position: relative;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .info{
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
    }
    hr{
        color: #55bec1;
    }
    input{
        width: 85%;
        background-color: #eeeeee;
        height: 40px;
        font-size: 18px;
        border: none;
        color: #55bec1;
    }
    label{
        width: 10%;
        font-size: 26px;
    }
    .butt{
        background-color: #F68175;
        color: white;
        width: 90%;
        border: none;
        height: 50px;
        font-size: 20px;
        border-radius: 5px;
    }
    .last{
        display: flex;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
</style>